<template>

	<view class="bg" :class="ids==1?'yinsesebg':(ids==2?'jinsebg':'tianlanbg')">
		<view class="mt-38 mb-32" style="width: 200rpx;height: 180rpx;margin: 0 auto;">
			<image class="img_top" v-if="ids==1" src=" /goodsPage/static/doct/yinsedetail.png" mode=""></image>
			<image class="img_top" v-if="ids==2" src=" /goodsPage/static/doct/jinsedetail.png" mode=""></image>
			<image class="img_top" v-if="ids==3" src=" /goodsPage/static/doct/tianlandetails.png" mode=""></image>
		</view>
		<view class="bg-E8EAEC  px-12 bor-r30" :class="ids==1?'yinsebanner':(ids==2?'jinsebanner':'tianlanbanner')"
			style="width: 654rpx;box-sizing: border-box;margin: 0 auto; padding-top: 56rpx; padding-bottom: 50rpx;">
			<view class=" aj-center">
				<view :class="ids==1?'yinsetitle2left':(ids==2?'jinsetitle2left':'tianlansetitle2left')"
					style="width: 180rpx; height: 6rpx; opacity: 1;">

				</view>
				<view class="mx-20 f-38 c-11 f-bold">
					中医馆
				</view>
				<view :class="ids==1?'yinsetitle2right':(ids==2?'jinsetitle2right':'tianlansetitle2right')"
					style="width: 180rpx;height: 6rpx;"> 
				</view>
			</view> 
			<view class="mt-50 mb-40 aj-center f-70 c-11 f-bold" style="letter-spacing: 40rpx;">
				
				<view class="" v-if="ids==1">
					银卡会员
				</view>
				<view class="" v-if="ids==2">
					金卡会员
				</view>
				<view class="" v-if="ids==3">
					钻石会员
				</view>
			</view>
			<view class="py-19 aj-center mb-20 bg-FFFFFF bor-r40 bor-5FA5FB" v-for="(item,index) in dataList" :key="index">
				{{item.desc}}
			</view> 
		</view> 
	</view>
</template>

<script>
	export default {
		props: ['ids', 'dataList'],
		data() {
			return {

			}
		},
		methods: {

		}
	}
</script>

<style scoped>
	.bg {
		width: 694rpx;
		padding-bottom: 56rpx;
		/* height: 1263rpx; */
		border-radius: 30rpx;

	}

	.yinsesebg {
		/* background: linear-gradient(180deg, #AFB3C1 0%, #C6CAD1 100%); */
		background: #9BCBFE;

	}

	.yinsebanner {
		/* background: #E8EAEC; */
		background: #FFFFFF;

	}

	.yinsetitle2left {
		background: linear-gradient(270deg, #AAACB1 0%, rgba(170, 172, 177, 0) 100%);
	}

	.yinsetitle2right {
		background: linear-gradient(90deg, #AAACB1 0%, rgba(170, 172, 177, 0) 100%);
	}





	.jinsebg {
		background: linear-gradient(180deg, #EEC283 0%, #F8DDB6 100%);
	}

	.jinsebanner {
		background: #FFF7EC;
	}

	.jinsetitle2left {
		background: linear-gradient(270deg, #DFB982 0%, rgba(223, 185, 130, 0) 100%);

	}

	.jinsetitle2right {
		background: linear-gradient(270deg, rgba(223, 185, 130, 0) 0%, #DFB982 100%);
	}





	.tianlanbg {
		/* background: linear-gradient(180deg, #A2CBF3 0%, #B2D4FC 100%); */
		background: linear-gradient(90deg, #A202FE 0%, #8E82FC 100%);

	}

	.tianlanbanner {
		background: #ECF5FF;
	}

	.tianlansetitle2left {
		background: linear-gradient(270deg, #A2CBF3 0%, rgba(162, 203, 243, 0) 100%);
	}

	.tianlansetitle2right {
		background: linear-gradient(270deg, rgba(162, 203, 243, 0) 0%, #A2CBF3 100%);
	}
	
	.img_top{
		padding:30rpx;
	}
</style>
